<template>
  <div>
    <el-checkbox-group ref="roleBox" v-model="checkedRoles" @change="handleCheckedRolesChange" v-for="role in roles" :key="role.id" >
      <el-checkbox :label="role.name" :checked="role.checked" border >{{role.zh}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
import { queryAll }  from '@/api/role'
export default {
  props: ['roleNames'],
  data() {
    return {
        roles: null,
        checkedRoles: [],
        isIndeterminate: true
      };
  },
  mounted: function () {
    queryAll().then(response => {
      this.roles = response.data
      if(this.roleNames){
        this.roles.forEach(a=>{
          a.checked = false
          this.roleNames.forEach(e => {
            if(a.name===e){
              a.checked = true
            }
          });
        })
      }
    })
  },
  methods: {
    init(){
      var temp = this
      temp.checkedRoles = []
      if(this.roleNames){
        setTimeout(function(){
          temp.roleNames.forEach(r=>{
            temp.checkedRoles.push(r)
          })
        },100)
      }
    },
    handleCheckedRolesChange(value) {
      this.roleNames.length = 0
      let checkedCount = value.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.roles.length;
      value.forEach(e=>{
        this.roleNames.push(e)
      })

    }
  }
}
</script>
